<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
body {
	margin: 10;
	font-size: 62.5%;
	line-height: 1.5;
}

.blue-button {
	background: #25A6E1;
	padding: 3px 20px;
	color: #fff;
	font-size: 10px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 4px;
	border: 1px solid #1A87B9
}

table {
	width: 70%;
}

th {
	background: SteelBlue;
	color: white;
}

td, th {
	border: 1px solid gray;
	font-size: 12px;
	text-align: left;
	padding: 5px 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 200px;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-overflow: ellipsis;
}
</style>
</head>
<title>00fly功能演示-Thymeleaf</title>
<script type="text/javascript">
function formReset() {
	window.top.location.href = "/user/";
}
</script>
<body>
	<center>
    <table>
	  <tr>
		<th th:colspan="${session.urls.size()+3}">Navigate</th>
	  </tr>
	  <tr>
	  <th:block th:each="item:${session.urls}">
	    <td><a th:href="|${item}/|" th:text="${item}"></a></td>
	  </th:block>
			<td><a href="/404">404</a></td>
			<td><a target="_blank" href="/doc.html">doc.html</a></td>
	  </tr>
    </table>    
	<form th:object="${item}" method="post" action="/user/add">
		<table>
			<tr>
				<th colspan="3">Add or Edit Item</th>
				<input type="hidden" name="userId" th:value="${item.userId}" />
			</tr>
			<tr>
				<td>userName:</td>
				<td><input name="userName" size="30" maxlength="30" th:value="${item.userName}" /></td>
				<td>String <span th:errors="*{userName}" style="color:red"/></td>
			</tr>
			<tr>
				<td>age:</td>
				<td><input name="age" size="30" maxlength="30" th:value="${item.age}" /></td>
				<td>Integer <span th:errors="*{age}" style="color:red"/></td>
			</tr>
			<tr>
				<td>desc:</td>
				<td><input name="desc" size="30" maxlength="30" th:value="${item.desc}" /></td>
				<td>String <span th:errors="*{desc}" style="color:red"/></td>
			</tr>
			<tr>
				<td colspan="3" style="text-align: center;"><input type="submit" class="blue-button" /> <input type="reset" class="blue-button" onclick="formReset()" /></td>
			</tr>
		</table>
	</form>
	<h3>Data List</h3>
			<table th:if="${page.content.size()>0}">
				<tr>
					<td align="left">
					 &nbsp;共 <b><font color="red" th:text="${page.totalElements}"/> </b>条记录 | <b><font	color="red" th:text="|${page.number+1}/${page.totalPages}|" /></b> 页&nbsp; | &nbsp; 
					<a href="/user/list?pageNo=0">首页</a>&nbsp; 
					<a th:href="|/user/list?pageNo=${page.number-1}|">前一页</a>&nbsp; 
					<a th:href="|/user/list?pageNo=${page.number+1>page.totalPages-1?page.totalPages-1:page.number+1}|">后一页</a>&nbsp; 
					<a th:href="|/user/list?pageNo=${page.totalPages-1}|">末页</a>&nbsp;
					</td>
				</tr>
			</table>
			<table th:if="${page.content.size()>0}">
				<tr>
				<th width="5">序号</th>
				<th width="5">Edit</th>
				<th width="5">Delete</th>
				<th width="100">userId</th>
				<th width="150">userName</th>
				<th width="150">age</th>
				<th width="150">desc</th>
			</tr>
			<th:block th:each="it,stat:${page.content}">
				<tr>
					<td th:text="${page.number*10+stat.count}"/>
					<td><a th:href="|/user/update/${it.userId}|">Edit</a></td>
					<td><a th:href="|/user/delete/${it.userId}|">Delete</a></td>
					<td th:text="${it.userId}"></td>
					<td th:text="${it.userName}"></td>
					<td th:text="${it.age}"></td>
					<td th:text="${it.desc}"></td>
				</tr>
			</th:block>
		</table>
	<h3>
		应用端口：<font color="red" th:text="${session.port}"></font>
	</h3>
	</center>
</body>
</html>
